<template>
    <view class="container">
        <view class="back-move-top"></view>
        <view class="action-level">
            <view class="login-center">
                <!-- 登录 -->
                <view class="form u-p-l-60 u-p-r-60">
                    <view :class="{ active: data.actived == 1 }" class="u-padding-30 u-flex-1 u-row-center u-text-center" @click="changeLoginType(1)">账户密码登录</view>
                    <view :class="{ active: data.actived == 0 }" class="u-padding-30 u-flex-1 u-row-center u-text-center" @click="changeLoginType(0)">验证码登录</view>
                </view>
                <!-- 输入框 -->
                <view class="input-area">
                    <view class="u-margin-top-20 u-main-color">
                        <view class="login-input">
                            <text class="icon input-icon" v-if="data.actived == 0">&#xe861;</text>
                            <text class="icon input-icon" v-if="data.actived == 1">&#xe635;</text>
                            <view style="width: 100%">
                                <uni-easyinput type="text" v-model="data.username" :placeholder="data.actived === 0 ? '手机号' : '账户'" :adjust-position="false" clearable :inputBorder="false" placeholder-style="color:#fff" />
                            </view>
                        </view>
                        <view class="login-input" v-show="data.actived == 0">
                            <text class="icon input-icon">&#xe624;</text>
                            <view style="width: 100%">
                                <uni-easyinput type="number" v-model="data.code" maxlength="6" placeholder="验证码" :adjust-position="false" placeholder-style="color:#fff" :inputBorder="false" />
                            </view>
                        </view>
                        <view class="login-input" v-show="data.actived == 1">
                            <text class="icon input-icon">&#xe652;</text>
                            <view style="width: 100%">
                                <uni-easyinput type="password" v-model="data.password" placeholder="密码" placeholder-style="color:#fff" :inputBorder="false" />
                            </view>
                        </view>

                        <view class="sendMessage" @click="getVerfyCode" v-if="data.actived == 0">{{ data.btnName }}</view>
                        <view class="other-action" v-if="data.actived == 1">
                            <view @click="data.autoLogin = !data.autoLogin">
                                <text class="icon" v-show="data.autoLogin">&#xe65a;</text>
                                <text class="icon" v-show="!data.autoLogin">&#xe60f;</text>
                                <text class="u-margin-left-20">记住我</text>
                            </view>
                            <view v-if="data.actived == 1" @click="forget">忘记密码</view>
                        </view>
                    </view>
                    <u-button class="login-btn" @click="login" :hair-line="false">登录</u-button>
                </view>
            </view>
            <!--  -->
            <view class="regsiter-btn" @click="register" v-if="!data.showGuideMask">注册账户</view>
        </view>
        <u-image width="160" height="160" :src="data.src" class="logo"></u-image>
        <Verify v-if="data.showVerify" @success="callback" mode="pop" captchaType="blockPuzzle" :imgSize="{ width: '330px', height: '155px' }" ref="verify"></Verify>
        <guide-mask v-if="data.showGuideMask" @skip="skip" @option="maskOption"></guide-mask>
    </view>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { useUserStore, useGuideStore } from '@/store'
import guideMask from '@/pages/guide/guide_login.vue';
import Verify from '@/components/verify/verify.vue';

const userStore = useUserStore()
const guideStore = useGuideStore()

interface dataProps {
    src: string
    actived: number
    autoLogin: boolean
    username: string | undefined
    password: string | undefined
    second: number
    disabled: boolean
    interval: NodeJS.Timer | null
    btnName: string
    code: string | undefined
    focus: boolean
    showVerify: boolean
    showGuideMask: boolean
}

const data: dataProps = reactive({
    src: '/static/icon/10001.png',
    actived: 1,
    autoLogin: false,
    username: undefined,
    password: undefined,
    second: 59,
    disabled: false,
    interval: null,
    btnName: '获取验证码',
    code: undefined,
    focus: false,
    showVerify: false,
    showGuideMask: false
})

const verify = ref<any>(null)

onMounted(() => {
    // 新手引导 判断 如果配置中 不存在该页面 说明没有引导过
    if (!guideStore.guideConfig.has('login')) {
        // 显示引导页面
        console.log('显示引导页面');
        data.showGuideMask = true;
    }
    data.username = userStore.username;
    data.password = userStore.password;
    if (data.password) data.autoLogin = true;

    // #ifdef H5
    uni.pageScrollTo({
        scrollTop:0
    })
    // #endif
})
/**
 * 切换登录方式
 */
function changeLoginType(n: number) {
    data.actived = n
    if (n == 1) {
        data.code = undefined
    }
}
/**
 * 获取验证码
 */
function getVerfyCode() {
    data.showVerify = true
    if (uni.$u.test.mobile(data.username)) {
        uni.$u.$api.MerchantApi.checkMerchantAccountByPhone({
            phone: data.username
        })
            .then(() => {
                //  验证通过  请求后台发送验证码
                verify.value.show()
            })
            .catch((e:any) => {
                uni.$u.toast('该手机号尚未注册!')
            })
    } else {
        uni.$u.toast('请检查手机号是否输入正确')
    }
}
/** 忘记密码 */
function forget() {
    uni.$u.$MRouter.forgetPassword.to({ phone: data.username })
}

/** 登入 */
function login() {
    // 短信验证码登录
    if (data.actived == 0) {
        if (!data.username) {
            uni.$u.toast('请输入手机号码!')
            return
        }
        if (!data.code) {
            uni.$u.toast('请输入验证码!')
            return
        }
        let param = {
            phoneNum: data.username,
            verificationCode: data.code
        }
        userStore.LoginByPhone(param).then(() => {
            uni.$u.toast('登录成功!')
            setTimeout(() => {
                uni.$u.$MRouter.home.to()
            }, 1000)
        })
    }
    // 用户名密码登录
    if (data.actived == 1) {
        if (!data.username) {
            uni.$u.toast('请输入用户名!')
            return
        }
        if (!data.password) {
            uni.$u.toast('请输入密码!')
            return
        }
        let userInfo = {
            username: data.username,
            password: data.password,
            remember: data.autoLogin
        }
        userStore.LoginByUsername(userInfo)
            .then(() => {
                uni.$u.toast('登录成功!')
                setTimeout(() => {
                    uni.$u.$MRouter.home.to()
                }, 1000)
            })
            .catch((e: any) => {
                if (e == '未设置密码') {
                    setTimeout(() => {
                        forget()
                    }, 1500)
                }
            })
    }
}
/** 跳过引导 */
function skip() {
    data.showGuideMask = false
    // 注册 引导 有主引导 register 加 有无邀请码两个分支
    guideStore.addPage(['login','register-1','register-0','register'])
}

/** 注册 */
function register() {
    uni.$u.$MRouter.register.to()
}

/** 发送验证码组件的回调函数 */
function callback(params: any) {
    sendMessage(params.captchaVerification)
}
/**发送验证码 */
function sendMessage(captchaVerification: string | number) {
    let para = {
        accountPhone: data.username,
        verificationCodeType: 4,
        code: captchaVerification
    }
    uni.$u.$api.MerchantApi.sendCode(para)
        .then(() => {
            //触发倒计时（一般用于请求成功验证码后调用）
            uni.$u.toast('验证码发送成功,请注意查收!')
            // 禁用按钮
            data.disabled = true
            data.second = 60
            data.interval = setInterval(() => {
                if (data.second > 0) {
                    data.second -= 1
                    data.btnName = data.second + 'S'
                } else {
                    data.disabled = false
                    data.second = 0
                    data.btnName = '获取验证码'
                }
            }, 1000)
        })
        .catch(() => {
            uni.$u.toast('验证失败!')
        })
}

/**隐藏 引导 并注册 */
function maskOption() {
    data.showGuideMask = false;
    guideStore.addPage('login')
    register();
}
</script>

<style scoped lang="scss">
.container {
    height: 100vh;
    position: relative;
    .active {
        color: white;
    }
    .logo {
        position: absolute;
        top: calc((50vh - (56vw + 44px) / 2) / 2 - 80rpx + var(--status-bar-height));
        left: calc(50vw - 80rpx);
        margin: 0 auto;
    }
    .action-level {
        background-color: rgba($color: #000000, $alpha: 0.55);
        width: 100vw;
        height: 100vh;
        position: absolute;
        top: 0;
        left: 0;
        .login-center {
            position: absolute;
            width: 100vw;
            top: calc(50vh - (56vw + 44px) / 2 - 44px + var(--status-bar-height));
        }
        .input-area {
            background-image: url(@/static/images/my.png);
            background-size: 100% auto;
            background-repeat: no-repeat;
            width: 86vw;
            height: 56vw;
            margin: 0 auto;
            padding: 20rpx;
            position: relative;
            color: white;
            .login-input {
                background: rgba(8, 9, 15, 0.4);
                height: 90rpx;
                border-radius: 20rpx;
                display: flex;
                align-items: center;
                padding: 0 10rpx;
                .input-icon {
                    font-size: 60rpx;
                    color: white;
                }

                &:nth-child(1n + 0) {
                    margin-bottom: 30rpx;
                }
                &:deep(input) {
                    color: white;
                }
            }
        }
        .form {
            color: #999999;
            height: 44px;
            display: flex;
            justify-content: space-around;
            font-size: 26rpx;
        }
        .other-action {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: white;
            margin-top: 30rpx;
            font-size: 28rpx;
        }
    }
}
.sendMessage {
    color: white;
    text-align: right;
}
.login-btn {
    width: 18vw;
    height: 18vw;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    border: none;
    color: white;
    position: absolute;
    bottom: 8rpx;
    left: calc(50% - 9vw);
}
.regsiter-btn {
    text-align: center;
    color: white;
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 20vw;
}
.back-move-top {
    background: url(@/static/images/login.jpg);
    background-size: 100% auto;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    min-height: 10000px;
    animation: back_move_top 600s linear infinite;
}

@keyframes back_move_top {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-10000px);
    }
}
</style>
